<template>
  <div class="container">
    <div class="visual-header infinite-container">
      <mu-tabs :value="activeTab" @change="handleTabChange">
        <mu-tab value="4" title="全部" />
        <mu-tab value="0" title="待支付" />
        <mu-tab value="1" title="未开方" />
        <mu-tab value="2" title="待购药" />
        <mu-tab value="3" title="待评价" />
      </mu-tabs>
    </div>
    <div class="tabcon infinite-container visual-content">
      <ul class="item" v-if="list.length > 0">
        <li v-for="(item, index) in list" :key="index">
          <div class="item-header">
            <div>
              <div>
                <span class="t3">订单时间</span>
                <span>{{item.createTime}}</span>
              </div>
              <div>
                <span class="t1">{{item.returnVisitAppointmentRecordStatus | filterMedicalStatus}}</span>
              </div>
            </div>
          </div>
          <div class="item-con" @click="gotoGoingDetail(item)">
            <div>
              <div class="item-con-mid">
                <div>
                  <img src="../../assets/wzjl/icon_zxwz_doctor.png" />
                </div>
                <div>
                  <h3>
                    <span>{{item.doctName}}</span>
                    <span>{{item.deptName}}</span>
                  </h3>
                  <div class="wrapword">
                    <span>病情：</span>
                    {{item.question | overText}}
                  </div>
                  <div>
                    <span>诊断：</span>
                    <span>{{item.diagnosis}}</span>
                  </div>
                </div>
              </div>
              <div class="item-right"></div>
            </div>
          </div>
          <div class="bottomHandler">
            <div>
              <!--待支付-->
              <div v-if="item.consultStatus === 10" class="flex flex_between flex_vcenter">
                <div>
                  <span class="t5" v-if="item.leftTimeTxt!=='已超时'">
                    <span>剩余时间：</span>
                    <span>{{item.leftTimeTxt}}</span>
                  </span>
                  <span class="t3" v-else>
                    <span>已超时</span>
                  </span>
                </div>
                <mu-raised-button class="no-shadow" label="去支付" primary @click="gotoPay(item)"></mu-raised-button>
              </div>

              <!--已开处方-->
              <div v-if="item.consultStatus == 13 && item.returnVisitAppointmentRecordStatus ==8 " class="flex flex_right">
                <mu-raised-button
                  class="no-shadow small"
                  label="查看药品订单"
                  primary
                  @click="gotoDetail(item, 'haveNotBuy')"
                ></mu-raised-button>
              </div>
              <div v-if="item.consultStatus === 24" class="flex flex_right">
                <mu-raised-button
                  class="no-shadow small"
                  label="查看药品订单"
                  primary
                  @click="gotoDetail(item)"
                ></mu-raised-button>
              </div>

              <!--未开处方-->
              <div v-if="item.returnVisitAppointmentRecordStatus == 1" class="flex flex_right">
                <mu-raised-button
                  class="no-shadow btn-small"
                  label="取消预约"
                  primary
                  @click="goCancelAppoint(item)"
                ></mu-raised-button>
              </div>

              <!--已结束-->
              <div v-if="item.returnVisitAppointmentRecordStatus == 7 " class="flex flex_right">
                <mu-raised-button label="立即评价"  @click="goJudge(item)" class="mr10 second small no-shadow"></mu-raised-button>
                <mu-raised-button label="查看处方" primary @click="gotoDetail(item)" class="small"></mu-raised-button>
              </div>

               <div v-if=" item.returnVisitAppointmentRecordStatus==15 " class="flex flex_right">
                <mu-raised-button label="立即评价"  @click="goJudge(item)" class="mr10 second small no-shadow"></mu-raised-button>
              </div>
              <!-- <div
                v-if=" item.consultStatus == 14"
                class="flex flex_right"
              >
                <mu-raised-button
                  class="no-shadow btn-small"
                  label="再次咨询"
                  primary
                  @click="gotoDetail(item, 'unbuy')"
                ></mu-raised-button>
              </div> -->
            </div>
          </div>
        </li>
      </ul>
      <empty v-else />
    </div>
  </div>
</template>

<script>
import empty from "../../components/empty.vue";
import leftBorderTitle from "../../components/leftBorderTitle.vue";
import TimeCounter from "../../components/TimeCounter.js";
import { commonAjaxJson, RESTFUL_API } from "../../api/api";

export default {
  data() {
    return {
      activeTab: "4",
      timeCounter: null,
      list: [],
      params: {
        status: 4,
        userId: sessionStorage.getItem("userId")
      }
    };
  },
  components: {
    empty,
    leftBorderTitle
  },
  filters: {
    overText(val) {
      if (val.length > 50) {
        return val.substr(0, 50) + "……";
      } else {
        return val;
      }
    }
  },
  mounted() {
    this.consultList();
  },
  methods: {
    goJudge(val) {
      this.$router.push({
        path: "/queryOnline/judge",
        query: val
      });
    },
    handleTabChange(val) {
      this.activeTab = val;
      this.params.status = val
      this.consultList();
    },
    go(path) {
      this.$router.push(path);
    },
    consultList() {
      commonAjaxJson(RESTFUL_API.consultList, this.params, true).then(res => {
        if (res.data.code == 200) {
          res.data.data.list.forEach(item => {
            item.leftTimeTxt = "-:-";
          });
          if (!this.timeCounter) {
            this.timeCounter = new TimeCounter(30 * 60);
          }
          this.timeCounter.ready().then(() => {
            var arr = [];
            res.data.data.list.forEach(item => {
              if (this.timeCounter.checkIsTimeOut(item.createTime)) {
                item.leftTimeTxt = "已超时";
              } else {
                arr.push(item);
              }
            });
            if (arr.length > 0) {
              this.timeCounter.timeChangCallback = splash => {
                arr.forEach(item => {
                  var txt = this.timeCounter.calTime(item.createTime, splash);
                  item.leftTimeTxt = txt;
                });
              };
              this.timeCounter.start();
            }
          });
          this.list = res.data.data.list;
        }
      });
    },
    gotoPay(item) {
      let illPayType = "";

      if (item.medInsurance == 1) {
        illPayType = "medInsurance";
      } else {
        illPayType = "selfPay";
      }
      sessionStorage.setItem("illPayType", illPayType);
      this.$router.push({
        path: "/medicalAgain/confirmPay",
        query: {
          cid: item.consultId
        }
      });
    },
    goCancelAppoint(item) {
      this.$router.push({
        path: "/queryHistory/cancelReason",
        query: {
          cid: item.consultId,
          action: "medicalAgainCancel"
        }
      });
    },
    gotoGoingDetail(item) {
      // 点击中间跳转
      //        <!--'10': '待支付',-->
      //        <!--'14': '超时未支付',-->
      //        <!--'15': '已评价',-->
      //        <!--'11': '已结束',-->
      //        <!--'12': '已取消',-->
      //        <!--'13': '已退款',-->
      //        <!--'21': '待接诊',-->
      //        <!--'22': '进行中',-->
      //        <!--'23': '待下单',-->
      //        <!--'24': '已下单'-->
      console.log(item.consultStatus);
      if (item.consultStatus == 10 || item.consultStatus == 14) {
        // 跳转到去支付页面
        this.$router.push({
          path: "/medicalHistory/topayDetail",
          query: {
            id: item.consultId
          }
        });
      } else {
        // 跳转到原生IM
        window.location.href =
          "app://medicalAgainIM?consultId=" +
          item.consultId +
          "&doctorName=" +
          item.doctName +
          "&doctorCode=" +
          item.doctCode +
          "&status=" +
          item.consultStatus +
          "&doctorId=" +
          item.doctId;
      }
    },
    gotoDetail(item, unbuy) {
      // 点击列表按钮跳转
      let url = "/medicalHistory/topayDetail";
      if (item.consultStatus === 11 || item.consultStatus === 23) {
        url = "/medicalHistory/medicalDetail";
      }
      this.$router.push({
        path: url,
        query: {
          haveNotBuy: unbuy,
          id: item.consultId
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";

.item-con-mid {
  word-break: break-all;
}

.ostatus {
  width: 42px;
  height: 21px;
  position: absolute;
  font-size: 10px;
  color: #fff;
  text-align: center;
  top: 0px;
  right: 15px;
  background: url("../../assets/wzjl/tab_zxwz_zx.png") no-repeat center
    center/100% 100%;
}

.tabcon {
  > ul {
    width: 100%;
  }
}

.fcon {
  background: #fff;
  padding-right: 15px;
  > ul {
    > li + li {
      margin-top: 5px;
    }
    > li {
      display: table;
      > div {
        display: table-cell;
        font-size: 14px;
      }
      > div:first-child {
        color: #666;
        white-space: nowrap;
        padding-right: 10px;
      }
      > div:last-child {
        color: #333;
      }
      > div.overtime {
        color: #ff6600;
      }
    }
  }
}

.item {
  > li {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
  }
  &-header {
    padding-left: 15px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #efefef;
    > div {
      width: 100%;
      height: 40px;
      display: table;
      font-size: 14px;
      > div {
        display: table-cell;
        vertical-align: middle;
      }
      > div:first-child {
        > span:first-child {
          color: #666;
        }
        > span:nth-child(2) {
          color: #333;
        }
      }
      > div:nth-child(2) {
        padding-right: 15px;
        width: 1%;
        white-space: nowrap;
        > span.topay {
          color: #ff6600;
        }
        > span.t1 {
          color: #ff6600;
        }
        > span.t2 {
          color: #666;
        }
        > span.t3 {
          color: #999;
        }
        > span.t4 {
          color: #ff0000;
        }
      }
    }
  }
  &-con {
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    padding: 10px 0 10px 15px;
    > div {
      width: 100%;
      position: relative;
      padding-right: 32px;
    }
    &-mid {
      display: table;
      width: 100%;
      > div:first-child {
        display: table-cell;
        vertical-align: middle;
        width: 52px;
        > img {
          width: 52px;
          height: 52px;
          vertical-align: top;
        }
      }
      > div:nth-child(2) {
        display: table-cell;
        padding-left: 15px;
        padding-right: 15px;
        vertical-align: middle;
        > h3 {
          font-size: 16px;
          color: #666;
          font-weight: normal;
          font-size: 14px;
          padding-bottom: 2px;
          > span:first-child {
            color: #333;
            font-size: 16px;
            padding-right: 10px;
          }
        }
        > div {
          font-size: 14px;
        }
        > div:first-of-type {
          color: #666;
        }
      }
    }
  }
  &-right {
    position: absolute;
    top: 50%;
    right: 12px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    background: #fff url(../../assets/images/arrow_dry.png) no-repeat center
      center/8px 16px;
  }
  &-left {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  &-footer {
    width: 100%;
    padding-left: 15px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #efefef;
    img {
      width: 14px;
      height: 14px;
    }
    > div {
      width: 100%;
      height: 40px;
      display: table;
      font-size: 14px;
      > div {
        display: table-cell;
        vertical-align: middle;
      }
      > div:first-child {
        width: 20px;
        line-height: 0;
      }
      > div:nth-child(2) {
      }
      > div:nth-child(3) {
        padding-right: 15px;
        text-align: right;
      }
      > div:nth-child(4),
      > div:nth-child(3) {
        width: 75px;
        padding-right: 15px;
        text-align: right;
        white-space: nowrap;
        @{deep} .mu-raised-button + .mu-raised-button {
          margin-left: 15px;
        }
        @{deep} .mu-raised-button {
          height: 29px;
          min-width: 75px;
          border: 1px solid #2abc6d;
        }
        @{deep}.mu-raised-button.mu-raised-button-inverse {
          color: #2abc6d;
        }
        @{deep}.mu-raised-button-primary {
          background: #fff;
        }
        @{deep}.mu-raised-button-label {
          vertical-align: middle;
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }
}

.bottomHandler {
  background-color: white;
  padding: 5px 10px;
}
</style>
